<template>
    <div class="body_content" v-if="skeleton">
        <div  class="box_" @click="detail">
            <div class="top">
                <h4
                :style="{'color': $store.state.nowTime==='moon' ? '#fff' : '#6d9bf6',}"
                >{{ essay.title }}</h4>
                <div class="label_">
                    <ul>
                        <li
                           v-for="(item,index)  in essay.type.split(',')"
                           :style="{'background': colors[index]}"><span
                           v-show="item !== ''">{{ item}}</span></li>
                    </ul>
                </div>
            </div>
            <div class="bottom">
                <div id="imgs" v-show="path">
                    <img :src="path" alt="" class="cover_" v-show="img" :title="essay.title">
                </div>
                <div style="width: 100%">
                    <p class="bottom_c" v-html="essay.body"></p>
                    <div class="information_left_">
                        <img src="/img/common/time.png" alt="" title="发布时间">{{ dayjs(essay.date).format('YYYY-MM-DD') }}&nbsp;&nbsp;
                        <span class="info"><img src="/img/common/liulan.png" alt="" title="浏览量">{{ essay.visit }}&nbsp;&nbsp;</span>
                        <span class="info"><img src="/img/common/pinglun.png" alt="" title="评论">{{comments }}&nbsp;&nbsp;</span>
                        <span class="info"><img src="/img/common/dianzan.png" alt="" title="点赞">{{ essay.likes }}</span>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div v-else class="body_content circle_box">
        <CircleLoading :outer="'4rem'" ></CircleLoading>
    </div>
</template>

<script>

import dayjs from "dayjs";
import api from "@/api";
import CircleLoading from "@/components/PublicComponents/CircleLoading.vue";

export default {
    name: "Encrypt",
    components: {CircleLoading},
    props: {encrypt: Object,index:Number},
    data() {
        return {
            essay: "",
            path: "",
            password: "",
            img: false,
            essayLabel: "",
            colors: [],
            comments: "",
            skeleton:false,
        }
    },
    mounted() {
        this.essay = this.encrypt;
        api.commentsWritingsGetAll(this.essay.wid).then((res) => {
            console.log(res.data)
            this.comments = res.data.data
        })
        if (this.essay.image !== "") {
            this.path = ((this.essay.img).split(','))[0];
            this.img = true;
        }
        this.color(this.essay.type.split(',').length);
    },
    watch:{
        essay(newValue,oldValue){
            if(newValue !== null){
                setTimeout(()=>{
                    this.skeleton = true;
                },((this.index+1)*100))
            }
        },
        index(newValue,oldValue){
            if(newValue !==""){
                this.index = newValue
            }
        }
    },
    methods: {
        dayjs,
        detail() {
            window.localStorage.setItem("essayInfo", JSON.stringify(this.essay))
            this.$router.push('/detail');
        },

        color(length) {
            for (let i = 0; i < length; i++) {
                this.r = Math.floor(Math.random() * 255);
                this.g = Math.floor(Math.random() * 255);
                this.b = Math.floor(Math.random() * 255);
                this.colors.push('rgba(' + this.r + ',' + this.g + ',' + this.b + ',0.8)');
            }
        },
    },
}
</script>

<style scoped>
.circle_box{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius:5px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background: rgba(246, 247, 248, 0.7);
}

.box_{
    animation: box_anni .4s ease-out 0s 1 forwards;
}
.box_:hover {
    cursor: pointer;
}
@keyframes box_anni {
    0%{
       transform: scale(0);
    }
    80%{
        transform: scale(1.01);
         }
    100%{
             transform: scale(1);
         }
}
.content_:hover .contents {
    color: #3586f1;
}

.left h4 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 18vw;
    min-width: 200px;
    margin-top: 5px;
    font-size: 1.1rem;
    color: #646060;
    font-weight: bolder;

}

@keyframes cont {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

.top h4:before {
    content: "标题";
    width: 2.5rem;
    text-align: center;
    display: inline-block;
    background: linear-gradient(to left, #EEC9A3, #EF629F);
    color: white;
    font-size: 14px;
    margin-right: 5px;
    border-radius: 3px;

}


.body_content {
    position: relative;
    padding: 10px;
    min-width: 230px;
    width: 100%;
    height: 200px;

}

.body_content input {
    width: 20rem;
    height: 3rem;
    border-radius: 10px;
    border: 1px solid #828588;
    outline: none;
    text-align: center;
    padding: 0 10px;
    font-size: 1rem;
    color: #625e5e;
    margin-top: 1rem;
    box-shadow: 0 0 2px 2px #ffffff;

}

.body_content input::placeholder {
    text-indent: 1rem;
    font-size: 0.8rem;
}


p {
    text-indent: 1em;
    margin: 0;
    overflow: hidden;
    height: 8.4rem;
    width: 100%;
    padding: 0;
    text-align: left;
    text-overflow: ellipsis;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    border-radius: 0 !important;
    letter-spacing: 1.5px;
    font-size: 0.9rem;
}

.body_content button {
    position: absolute;
    right: 0;
    margin-top: 1.05rem;
    padding: 0.93rem 0.8rem;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 0;
    background: #4b73f1;
    color: white;
}

.body_content button:hover {
    background: #68c070;
}


a {
    color: #8f8c8c;
    transition: all .1s;
    line-height: 1.6rem;
    margin-right: 10px;
}

a:hover {
    color: #3586f1;
}


img {
    width: 1rem;
    margin-right: 2px;
}

.information_right img {
    margin-right: 3px;
}



ul {
    list-style: none;
}

ul li:nth-child(n) {
    margin-left: 10px;
    background: #68c070;
    font-size: 14px;
    padding: 0 5px;
    color: white;
    border-radius: 3px;
}

li{
    min-width:50px ;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}

.box_ {
    height: 100%;
}

.top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}

.top h4 {
    width: 250px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #70a9f6;
    font-weight: bolder;
}

.label_ ul {
    display: flex;
    justify-content: right;
    align-items: center;
}

.bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: calc(100% - 10px);
    padding: 10px 0;
}

.information_left_ {
    display: flex;
    justify-content: left;
    align-items: center;
    font-size: 0.8rem;
    min-font-size: 14px;
    padding: 0;
    margin: 0;
    margin-top: 5px;
}

.info {
    display: flex;
    align-items: center;
}

.cover_ {
    display: flex;
    justify-content: left;
    width: 230px;
    height: 155px;
    margin-left: 0;
    margin-right: 10px;
}


@media (min-width: 0px) and (max-width: 600px) {
    .cover_ {
        width: 200px;
        height: 135px;
    }

    .bottom_c {
        letter-spacing: 0;
    }

    .information_left_ img {
        width: 11px;
    }

    .information_left_ {
        margin-top: 2px;
    }

    .cover_ {
        width: 180px;
    }

    .info {
        display: none;
    }

    .body_content {
        padding: 5px;
        height: 180px;
    }

    .box_ {
        height: 12vh;
    }
}
</style>